<template>
  <div class="item7Body">
    <div class="item7Body1">
      <div class="item7Body1s">
        <p>{{ temperature }}</p>
        <div class="bg1">
          <img src="./assets/icon_1.png" alt="">
        </div>
      </div>
      <div class="titleInfo">机房温度</div>
    </div>
    <div class="item7Body1">
      <div class="item7Body1s">
        <p>{{ humidity }}</p>
        <div class="bg1">
          <img src="./assets/icon_2.png" alt="">
        </div>
      </div>
      <div class="titleInfo">机房湿度</div>
    </div>
  </div>


</template>

<script>

// import {yearlyReport} from "@/api/api/LargeScreenData.js";

export default {
  data() {
    return {
      temperature: 10+"℃",
      humidity: 30+"℃",
      list: [
      ]

    }
  },
  components: {},
  computed: {},
  mounted() {
    // await this.getData()
    setInterval(() => {
      if (this.temperature >= 30 || this.humidity >= 75) {
        this.temperature = 10+"℃";
        this.humidity = 30+"℃";
      } else {
        this.temperature = (parseFloat(this.temperature) + 0.1).toFixed(1) + "℃";
        this.humidity = (parseFloat(this.humidity) + 0.1).toFixed(1) + "℃";
      }
    }, 5000);
  },
  methods: {
    //获取接口数据
    // async getData() {
    //   try {
    //     const res = await yearlyReport();
    //     this.list = res.data;
    //   } catch (err) {
    //     console.error(err);
    //   }
    // },
  },
}
</script>

<style lang="scss" scoped>
.item7Body {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .item7Body1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;

    .item7Body1s {
      width: 100%;
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      position: relative;

      p {
        color: #fca607;
        font-size: 20px;
        font-family: AlibabaPuHuiTiB;
        width: 100%;
        text-align: center;
      }
    }

    .bg1 {
      position: absolute;
      width: 100%;
      height: calc(100% - 0px);
      display: flex;
      z-index: -1;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      img {
        height: 80%;
        position: relative;
        display: block;
        animation: rotateIcon 4s linear infinite; /* 旋转动画，每2秒完成一个360度旋转，并且会无限次重复 */
      }
    }
  }

  .titleInfo {
    color: #ffffff;
    font-size: 20px;
    font-family: AlibabaPuHuiTiB;
    width: 100%;
    text-align: center;
  }
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
